<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>考勤首页</title>
	<link rel="stylesheet" href="/css/home_page.css">
	<link rel="stylesheet" href="/css/skyblue/home_page.css">
</head>

<body>
	<div class="totals" id="vue-root" :class="theme">
		<div class="header" v-cloak>
			<div class="people-total">
				<div class="number people-number">{{summary.totalPerson}}人</div>
				<div class="title  people-title">
					<div>学校总人数</div>
				</div>
			</div>
			<div class="attendance-total">
				<div class="number attendance-number">{{summary.totalAttendance}}条</div>
				<div class="title attendance-title">
					<div>总考勤记录</div>
				</div>
			</div>
			<div class="moments-total">
				<div class="number moments-number">{{summary.monthCircle}}条</div>
				<div class="title  moments-title">
					<div>本月发布班级圈</div>
				</div>
			</div>
			<div class="income-total">
				<div class="number income-number">{{summary.monthOrder/100}}元</div>
				<div class="title income-title">
					<div>本月收入总额</div>
				</div>
			</div>
		</div>
		<div class="center" v-cloak>
			<div class="attendance">
				<div class="preview-title red" onclick="location.href='attendance_records.html'">实时考勤记录</div>
				<div class="preview">
					<div class="preview-info" v-for="attendance in attendances" :key="attendance.id">
						<img :src="avatar(attendance.avatar,!attendance.classesName)">
						<div class="info">
							<div>
								<span class="name" v-text="attendance.studentName"></span>
								<span class="class" v-if="attendance.classesName"
									v-text="attendance.classesName"></span>
							</div>
							<div>
								<span class="student" v-if="attendance.classesName">学生</span>
								<span class="teacher" v-else>教师</span>
								<span class="state" :class="{abnormal:attendance.status==1}"
									v-text="['正常','异常','进校','离校','迟到','早退'][attendance.status]"></span>
								<span class="time" v-text="timeago(attendance.time)"></span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="moments">
				<div class="preview-title green" onclick="location.href='interactive_classes_circle.html'">班级圈消息</div>
				<div class="preview">
					<div class="preview-info" v-for="circle in circles" :key="circle.id">
						<img :src="avatar(circle.avatar,circle.type==null)">
						<div class="info">
							<div>
								<span class="name" v-text="circle.personName"></span>
								<span class="class" v-text="circle.classesName"></span>
							</div>
							<div>
								<span class="success" v-if="circle.audited">已审核</span>
								<span class="fail" v-else>未审核</span>
								<span class="time" v-text="timeago(circle.time)"></span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="income">
				<div class="preview-title yellow" onclick="location.href='finance_order.html'">收入记录</div>
				<div class="preview">
					<div class="preview-info" v-for="order in orders" :key="order.id">
						<img :src="avatar(order.avatar,false)">
						<div class="info">
							<div>
								<span class="money-name" v-text="order.personName"></span>
								<span class="money-title" v-text="order.serviceName"></span>
							</div>
							<div>
								<span class="payment">支付金额
									<span class="money" v-text="order.fee/100"></span>元</span>
								<span class="time" v-text="timeago(order.time)"></span>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
		<div class="footer" v-cloak>
			<div class="attendance-ratio">
				<div style="margin: 10px 0;">今日考勤率</div>
				<div style="padding: 0 25px;">
					<canvas ref="chart" style="margin: 20px 0;"></canvas>
				</div>
				<div>已考勤人数：{{summary.todayAttendance}}</div>
				<div>未考勤人数：{{summary.todayNoAttendance}}</div>
			</div>
			<div class="notice">
				<div class="notice-title" onclick="location.href='school_notice.html'">学校通知</div>
				<div class="notice-all">
					<div class="notice-info" v-for="notice in notices" :key="notice.id">
						<div class="zh1" v-text="notice.title"></div>
						<div class="zh2" v-text="getText(notice.content)"></div>
						<div class="zh3" v-text="notice.time"></div>
						<div style="clear: left;"></div>
					</div>

				</div>

			</div>
		</div>

		<div class="notice notice2">
			<div class="notice-title" onclick="location.href='interactive_classes_notice.html'">班级通知</div>
			<div class="notice-all">
				<div class="notice-info" v-for="notice in classesNotices" :key="notice.id">
					<div class="zh1" v-text="notice.title"></div>
					<div class="zh2" v-text="getText(notice.text)"></div>
					<div class="zh3" v-text="notice.time"></div>
					<div style="clear: left;"></div>
				</div>

			</div>
		</div>
	</div>


	<!-- <script src="/scriptZIP/qs.min.js"></script>
	
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/timeago.min.js"></script>
	<script src="/scriptZIP/chart.min.js"></script> -->
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/timeago.min.js"></script>
	
	<script src="/scriptZIP/chart.min.js"></script>
	

	<script src="/js/common.js"></script>


	<script>
		var schoolId = top_params().id;
		var app = new Vue({
			el: '#vue-root',
			data: {
				summary: {},
				attendances: [],
				circles: [],
				orders: [],
				notices: [],
				classesNotices: []
			},
			created: function () {
				if (!schoolId)
					return axios.get('/pc/logout').then(function (res) {
						alert('此浏览器不适用本系统，请更换浏览器');
						location.replace('/');
					});
					axios.get('/pc/order/list?schoolId=' + schoolId).then(function (res) {
						this.orders = res.data.list;
						
					}.bind(this));
				axios.get('/pc/home/summary/' + schoolId).then(function (res) {
					this.summary = res.data;
					this.$nextTick(function () {
						new Chart(this.$refs.chart, {
							type: 'doughnut',
							data: {
								datasets: [{
									data: [this.summary.todayAttendance, this
										.summary.todayNoAttendance
									],
									backgroundColor: ['#ad6ade', '#888888']
								}],
								labels: ['已考勤', '未考勤']
							},
						});
					}.bind(this));
				}.bind(this));

				var params = {
					attendance: {
						only: false
					}
				};

				'attendance,circle,notice,classesNotice'.split(',').forEach(function (it) {
					axios.get('/pc/' + it + '/list/' + schoolId, {
						params: params[it]
					}).then(function (res) {
						this[it + 's'] = res.data.list;
					}.bind(this));
				}.bind(this));

			},
			methods: {
				timeago: function (time) {
					return timeago.format(time, 'zh_CN');
				},
				avatar: function (avatar, isTeacher) {
					if (!avatar) return '/image/admin.svg';
					return '/static/' + schoolId + (isTeacher ? '/teacher/' : '/student/') + avatar;
				},
				getText: function (html) {
					var b = document.createElement('div');
					b.innerHTML = html;
					var a = b.innerText;
					b.remove();
					if (a && a.length > 150)
						a = a.substr(0, 150) + '...';
					return a;
				},
			},
			computed: {
				theme() {
					return localStorage['theme']
				}
			}
		});
	</script>

</body>

</html>